<template>
	<view>
		<view class="shangpinname">
			<view class="top-box">
				<view class="sp-txt">
					商品名称
				</view>
				<view class="sp-num">
					0/30
				</view>
			</view>
			<textarea name="name-s" id="name-s" cols="30" rows="10" placeholder="请输入商品标题、例:红烧牛肉面单人餐(小份)"></textarea>
		</view>
		<view class="line">

		</view>
		<view class="jianjiebox">
			<view class="top-box">
				<view class="sp-txt">
					商品简介
				</view>
				<view class="sp-num">
					0/30
				</view>
			</view>

			<view class="textbox">
				<textarea name="jiesao-txt" id="jiesao-txt" cols="30" rows="10" placeholder="请输入商品介绍等"></textarea>
			</view>
		</view>
		<view class="line">

		</view>
		<view class="fenleibox">
			<view class="fl-txt">
				商品分类
			</view>
			<view class="right-box">
				<view class="fenlei">
					{{fenleitxt?fenleitxt:'请选择商品分类'}}
				</view>
				<image src="/static/mai/right_icon.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
			</view>
		</view>
		<view class="line">

		</view>
		<view class="dianpu-1">
			<view class="itembox">
				<view class="left-txt">
					商品排序
				</view>
				<view class="right-txt">
					{{paixu?paixu:'数值越大越靠前'}}
					<image src="/static/mai/right_icon.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
				</view>
			</view>
			<view class="itembox">
				<view class="left-txt">
					商品价格
				</view>
				<view class="right-txt">
					<input type="text" placeholder="请选择商品价格" />
					￥
				</view>
			</view>
			<view class="itembox">
				<view class="left-txt">
					商品库存
				</view>
				<view class="right-txt">
					<input type="text" placeholder="请输入库存" />
				</view>
			</view>
			<view class="itembox">
				<view class="left-txt">
					暂不设置
				</view>
				<view class="right-txt">
					<evan-switch v-model="checked" @change="Switchcg" active-color="#07C160"
						inactive-color="#AFAFAF"></evan-switch>
				</view>
			</view>
		</view>
		<view class="line">

		</view>

		<view class="sj-box">
			<view class="sj-txt">
				是否上架
			</view>
			<evan-switch v-model="checked" @change="Switchcg" active-color="#07C160"
				inactive-color="#AFAFAF"></evan-switch>
		</view>

		<view class="line">

		</view>

		<view class="ikz-updata-box">

			<view class="tiles-x">
				商品主图
			</view>
			<image v-if="positiveImage && !files[0]" class="ikz-updata-add1" @click="addPic(2)" mode=""
				:src="positiveImage"></image>
			<image v-else-if="files[0]" class="ikz-updata-add1" @click="addPic(2)" mode="" :src="files[0]">
			</image>
			<image v-else class="ikz-updata-add" @click="addPic(2)" mode="" src="/static/forum/uploads1.png">
			</image>
		</view>
		<view class="ikz-updata-box">

			<view class="tiles-x">
				<view class="" style="text-align: left;">
					商品轮播图
				</view>
				<view class="" style="text-align: right;">
					1/5
				</view>
			</view>
			<image v-if="positiveImage && !files[0]" class="ikz-updata-add1" @click="addPic(2)" mode=""
				:src="positiveImage"></image>
			<image v-else-if="files[0]" class="ikz-updata-add1" @click="addPic(2)" mode="" :src="files[0]">
			</image>
			<image v-else class="ikz-updata-add" @click="addPic(2)" mode="" src="/static/forum/uploads1.png">
			</image>
			<view class="tips">
				*请上传尺寸为800*800像索的图片
			</view>
		</view>
		<view class="line">

		</view>

		<view class="xq-box">
			<view class="top-box">
				<view class="xp-txt">
					商品详情介绍
				</view>
				<view class="xq-num">
					0/300
				</view>
			</view>
			<view class="qx-text-area">
				<textarea name="xqjs-txt" id="xqjs-txt" cols="30" rows="10" placeholder="请输入商品详情介绍等"></textarea>
			</view>

			<view class="ikz-updata-box">

				<view class="tiles-x">
					<view class="" style="text-align: left;">
						商品主图
					</view>
					<view class="" style="text-align: right;">
						1/10
					</view>
				</view>
				<image v-if="positiveImage && !files[0]" class="ikz-updata-add1" @click="addPic(2)" mode=""
					:src="positiveImage"></image>
				<image v-else-if="files[0]" class="ikz-updata-add1" @click="addPic(2)" mode="" :src="files[0]">
				</image>
				<image v-else class="ikz-updata-add" @click="addPic(2)" mode="" src="/static/forum/uploads1.png">
				</image>
				<view class="tips">
					*请上传单个图片大小不超过1M
				</view>
			</view>

		</view>
		<view class="bomline">

		</view>

		<view class="bom-bb">
			<view class="delbox">
				删除
			</view>
			<view class="enter">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data( ) {
			return {
				fenleitxt: '',
				checked: false,
				files: [ ]
			};
		},
		methods: {
			Switchcg( ) {
				console.log( this.checked, 'checked' );
			},
			addPic( status ) {

				var that = this;
				wx.chooseImage( {
					count: 1,
					sizeType: [ 'original', 'compressed' ],
					sourceType: [ 'album', 'camera' ],
					success( res ) {
						console.log( res, 'ressss' );
						// tempFilePath可以作为img标签的src属性显示图片
						that.files[ 0 ] = res.tempFilePaths[ 0 ];
						that.$forceUpdate( );
						// that.$emit( 'returnFiles', that.files )
					}
				} )
			},
		},
	}
</script>

<style lang="scss" scoped>
	.shangpinname {
		width: 750rpx;
		height: 182rpx;
		background: #FFFFFF;
		padding: 22rpx 30rpx;
		box-sizing: border-box;

		.top-box {
			width: 100%;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.sp-txt {
				width: 50%;
				height: 40rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
				text-align: left;
			}

			.sp-num {
				width: 50%;
				height: 36rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				text-align: right;
			}
		}

		#name-s {
			width: 478rpx;
			height: 36rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #AFAFAF;
			text-align: left;
			margin-top: 40rpx;
		}
	}

	.line {
		width: 750rpx;
		height: 24rpx;
		background-color: #f5f5f5;
	}

	.bomline {
		width: 750rpx;
		height: 240rpx;
		background-color: #f5f5f5;
	}

	.bom-bb {
		width: 750rpx;
		height: 176rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.delbox {
			width: 314rpx;
			height: 88rpx;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			border: 2rpx solid #FF3500;
			font-weight: 400;
			font-size: 30rpx;
			color: #FF3500;
			text-align: center;
			line-height: 88rpx;
		}
		
		.enter{
			width: 314rpx;
			height: 88rpx;
			background: #247EFF;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
		}
	}

	.jianjiebox {
		width: 750rpx;
		height: 262rpx;
		background: #FFFFFF;
		padding: 22rpx 30rpx;
		box-sizing: border-box;

		.top-box {
			width: 100%;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.sp-txt {
				width: 50%;
				height: 40rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
				text-align: left;
			}

			.sp-num {
				width: 50%;
				height: 36rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				text-align: right;
			}
		}

		.textbox {
			width: 690rpx;
			height: 160rpx;
			background: #F5F5F5;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 10rpx;
			box-sizing: border-box;
			margin-top: 16rpx;

			#jiesao-txt {
				width: 100%;
				height: 100%;
				font-weight: 400;
				font-size: 24rpx;
				color: #AFAFAF;
				text-align: left;
			}
		}
	}

	.fenleibox {
		width: 750rpx;
		height: 102rpx;
		background: #FFFFFF;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.fl-txt {
			width: 50%;
			height: 40rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #222222;
			text-align: left;
		}

		.right-box {
			width: 50%;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.fenlei {
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				text-align: right;
			}
		}

	}

	.dianpu-1 {
		width: 750rpx;
		height: 406rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 0 30rpx;
		box-sizing: border-box;

		.itembox {
			width: 100%;
			height: 100rpx;
			border-bottom: 1rpx solid #F8F8F8;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left-txt {
				width: 50%;
				height: 40rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
				text-align: left;
			}

			.right-txt {
				width: 50%;
				height: 40rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				text-align: right;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}

			&:nth-child(4) {
				border-bottom: none;
			}
		}
	}

	.sj-box {
		width: 750rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.sj-txt {
			width: 50%;
			height: 40rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #222222;
			text-align: left;
		}
	}

	.ikz-updata-box {
		width: 100%;
		height: 276rpx;
		background-color: #fff;
		padding: 22rpx 30rpx;
		box-sizing: border-box;

		.tiles-x {
			width: 100%;
			height: 40rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #222222;
			text-align: left;
			margin-bottom: 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.ikz-updata-add1 {
			width: 124rpx;
			height: 124rpx;
		}

		.ikz-updata-add {
			width: 124rpx;
			height: 124rpx;
		}

		.tips {
			width: 100%;
			height: 36rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #FF4F21;
			text-align: left;
			margin-top: 24rpx;
		}
	}

	.xq-box {
		width: 750rpx;
		height: 578rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 30rpx;
		box-sizing: border-box;

		.top-box {
			width: 100%;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.xp-txt {
				width: 50%;
				height: 40rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
				text-align: left;
			}

			.xq-num {
				width: 62rpx;
				height: 36rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				text-align: right;
			}
		}

		.qx-text-area {
			width: 690rpx;
			height: 160rpx;
			background: #F5F5F5;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin-top: 16rpx;
			padding: 10rpx;
			box-sizing: border-box;
			margin-bottom: 62rpx;

			#xqjs-txt {
				font-weight: 400;
				font-size: 24rpx;
				color: #AFAFAF;
				text-align: left;
			}
		}

		.zhutu-box {
			width: 100%;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 62rpx;

			.xp-txt {
				width: 50%;
				height: 40rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
				text-align: left;
			}

			.xq-num {
				width: 62rpx;
				height: 36rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				text-align: right;
			}
		}

	}
</style>